<template>
  <div class="product_box">
    <div class="h50">
      <my-tab-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></my-tab-bar>
    </div>
    <div class="img_box">
      <img v-lazy="info.goodsCoverImg" alt="" />
    </div>
    <h4>{{ info.goodsName }}</h4>
    <div class="price_box">
      <template v-if="info.originalPrice !== info.sellingPrice">
        <span>{{ info.originalPrice }}</span>
        <span>{{ info.sellingPrice }}</span>
      </template>
<template v-else>
        <span>{{ info.sellingPrice }}</span>
      </template>
</div>
<p class="p_box" v-html="info.goodsDetailContent"></p>
<van-goods-action>
    <van-goods-action-icon icon="chat-o" text="客服" dot />
    <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum" @click="cart" />
    <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
    <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
    <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
</div>
</template>

<script>
    import {
        getGoodsInfo,
        addCart
    } from "../api/index";
    export default {
        data() {
            return {
                info: {},
            };
        },
        created() {
            this.getData();
            this.$store.dispatch("updateCartNum");

        },
        methods: {
            onClickLeft() {
                this.$router.back();
            },
            getData() {
                let id = this.$route.params.goodsId;
                console.log(id)
                getGoodsInfo(id).then((data) => {
                    this.info = Object.freeze(data.data);
                    console.log(this.info)
                });
            },
            addCart() {
                addCart({
                    goodsCount: 1,
                    goodsId: this.$route.params.goodsId
                }).then(
                    (data) => {
                        if (data.resultCode == 200) {
                            this.$store.dispatch("updateCartNum");
                        }
                    }
                );
            },
            cart() {
                this.$router.push("/cart");
            },
        },
        computed: {
            cartNum() {
                return this.$store.state.cartNum;
            },
        },
    };
</script>
<style lang='less' scoped>
    .product_box {
        .img_box {
            width: 100%;
            height: auto;
            img {
                width: 100%;
            }
        }
        .p_box {
            width: 100%;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
    }
</style>